﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <svg width="500" height="1000">
        <defs>
            <marker id="markerCircle" markerWidth="8" markerHeight="8" refx="5" refy="5">
                <circle cx="5" cy="5" r="3" style="stroke: none; fill: #000000;" />
            </marker>

            <marker id="markerArrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto">
                <path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;" />
            </marker>
        </defs>
        <line x1="0" y1="0" x2="100" y2="50" stroke="red" stroke-width="1" marker-end="url(#markerArrow)" />
        <path d="M100,10 L150,10 L150,60"
            style="stroke: #6666ff; stroke-width: 1px; fill: none; marker-start: url(#markerCircle); marker-mid: url(#arrow); marker-end: url(#markerArrow)" />

        <rect rx="10" ry="10" height="50" width="50" fill="red" x="100" y="200">
        </rect>


        <rect fill="white" stroke="red" x="200" y="200" width="50" height="50" rx="7.5" ry="7.5" />
        <rect fill="white" stroke="red" x="210" y="210" width="10" height="10" rx="7.5" ry="7.5" />
        <rect fill="white" stroke="red" x="210" y="230" width="5" height="5" rx="7.5" ry="7.5" />
        <text font-size="9px" x="215" y="220" width="20" height="10">act1</text>
        <rect fill="white" stroke="red" x="247" y="415" width="50" height="50" rx="7.5" ry="7.5" />
        <rect fill="white" stroke="red" x="257" y="425" width="10" height="10" rx="7.5" ry="7.5" />
        <rect fill="white" stroke="red" x="257" y="445" width="5" height="5" rx="7.5" ry="7.5" />
        <text font-size="9px" x="262" y="435" width="20" height="10">act2</text>
        <polyline fill="none" marker-end="url(&quot;#markerArrow&quot;)" stroke="red" stroke-width="1" points="225,250 225,260 225,332.5 272,332.5 272,405 272,415" />

        <polygon id="p1" points="100,100 175,50 250,100 175,150" style="fill: none; stroke: #000000; stroke-width: 1" />

        <circle cx="200" cy="150" r="40" stroke="black" stroke-width="1" fill="none" />
    </svg>
</body>
</html>
<script>
    document.getElementById("p1").setAttribute("points", "100,100 175,50 250,100 175 200");

    var arr = [[100, 100], [200, 200], [300, 300]];
    var str = "";
    for (var i = 0; i < arr.length; i++) {
        str += arr[i].join(",") + " ";
    }
    str.substring(0, str.length - 1);
</script>
